<template>
  <div class="box">
    <div class="w100 flex-row j-sb " >
      <build-el-h1 name="参选人展示.png" type="1" ></build-el-h1>
      <build-el-more src="Vote" style="margin-bottom: 15px;"></build-el-more>
    </div>
    <div class="w100 flex-row people-list j-sb" v-loading="Boolean(tableData===null)">
      <build-el-list-people
        v-for="(item) in tableData"
        :key="item.artistId"
        :artistId="item.artistId"
        :titleImg="item._titleImg"
        :companyName="item.companyName"
        :artistPosition="item.artistPosition"
        :ticketNumber="item.ticketNumber"
        :artistName="item.artistName"
      ></build-el-list-people>
    </div>
  </div>
</template>
<script>
import buildElH1 from "../build-el-h1";
import buildElMore from "../build-el-more";
import buildElListPeople from "../build-el-list-people";
import JSONData from "@/assets/JSON";
export default {
  components: {
    buildElH1,
    buildElMore,
    buildElListPeople,
  },
  data() {
    return {
        tableData: null,
      ...JSONData,
    };
  },
  async created() {
    await this.init(1);
  },
  methods: {
    async init(page) {
      this.tableData = [];
      let tableData = await this.api.findNewVoteArtistList(1, 12);
      this.tableData = tableData.list;
      console.log('蚕丝啊人展示',this.tableData)
    },
    changePage(e) {
      this.pageNow = e;
      this.init(e);
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  box-sizing: content-box;
  padding: 25px 20px;
  .people-list {
    flex-wrap: wrap;
  }
}
</style>
